<template>
  <div class="app-container">
    <CustomContent>
      <template v-slot:body>
        <div>
          <MmvTitle title="新增调价"></MmvTitle>
          <el-form ref="form" :model="form" :rules="rules"  :label-position="'right'">
            <el-row>
              <el-col :span="8">
                <el-form-item label="选择门店:" prop="storeBasic">
                  <el-select v-model="form.storeBasic" filterable placeholder="请选择门店" value-key="storeId" style="width: 70%" @change="changeStore">
                    <el-option
                      v-for="(item, index) in storeList"
                      :key="item.storelId"
                      :label="item.storeName"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="选择车型:"  prop="currentCarModelList">
                  <el-select v-model="form.currentCarModelList" multiple filterable  placeholder="请选择车型" value-key="carModelId" style="width: 70%" @change="changeCarModels">
                    <el-option
                      v-for="item in carModelList"
                      :key="item.carModelId"
                      :label="item.carModelName"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="价格是否一致:" prop="priceAccord" style="width: 80%">
                  <el-radio-group v-model="form.priceAccord">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="同步平台:" prop="sysPlatformArray">
                  <el-checkbox-group v-model="form.sysPlatformArray">
                    <el-checkbox v-for="item in dict.type.ota_order_resource" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="价格类型:" prop="priceTypes">
                  <el-checkbox-group v-model="form.priceTypes" @change="changePriceType">
                    <el-checkbox v-for="item in priceTypes" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-tabs  v-model="activeName">
              <el-tab-pane v-if="form.priceTypes.includes('1')" label="平日价格配置" name="1">
                <ordinary-day
                  ref="ordinaryDay"
                  :sys-platform-array="form.sysPlatformArray"
                  :car-model-list="form.currentCarModelList"
                  :price-accord="form.priceAccord">
                </ordinary-day>
              </el-tab-pane>
              <el-tab-pane v-if="form.priceTypes.includes('2')" label="节假日价格配置" name="2">
                <holidays
                  ref="holidays"
                  :sys-platform-array="form.sysPlatformArray"
                  :car-model-list="form.currentCarModelList"
                  :price-accord="form.priceAccord"
                >
                </holidays>
              </el-tab-pane>
              <el-tab-pane v-if="form.priceTypes.includes('3')" label="特殊日价格配置" name="3">
                <special-days
                  ref="specialdays"
                  :sys-platform-array="form.sysPlatformArray"
                  :car-model-list="form.currentCarModelList"
                  :price-accord="form.priceAccord">
                </special-days>
              </el-tab-pane>
            </el-tabs>
          </el-form>
        </div>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="primary" :loading="loading" @click="saveForm">立即执行</el-button>
          <el-button type="info" plain @click="close">取消</el-button>
        </div>
      </template>
    </CustomContent>


  </div>
</template>

<script>
import * as priceUpdate from "@/api/ota/priceUpdate"
import MmvTitle from "@/components/MmvUI/MmvTitle.vue";
import CustomContent from "@/components/custom/content.vue";
import OrdinaryDay from "@/views/system/otaPriceUpdate/add/components/OrdinaryDay.vue";
import Holidays from "@/views/system/otaPriceUpdate/add/components/Holidays.vue";
import SpecialDays from "@/views/system/otaPriceUpdate/add/components/SpecialDays.vue";

export default {
  components: {
    SpecialDays,
    Holidays,
    OrdinaryDay,
    CustomContent,
    MmvTitle,
  },
  dicts:['ota_order_resource'],
  data() {
    return {
      loading:false,
      storeList:[],//门店列表
      carModelList:[],//车型列表
      servicesList:[],//服务商列表
      activeName:'1',
      priceTypes:[
        {
          label:'平日价格配置',
          value:'1',
        },
        {
          label:'节假日价格配置',
          value:'2',
        },
        {
          label:'特殊日价格配置',
          value:'3',
        }
      ],
      form:{
        priceAccord:1,//价格是否一致（1.是 2.否）
        sysPlatform:null,//同步平台（多个逗号隔开）
        sysPlatformArray:[],
        storeBasicList:[],//门店
        grabPriceWorkList:[],//工单车型
        currentCarModelList:[],//下拉框选择的车型,
        priceTypes:[],//价格类型
      },
      rules: {
        storeBasic: [{required: true,  message: '请选择门店', trigger: 'change'}],
        currentCarModelList: [
          {required: true, type:'array', message: '请选择车型', trigger: 'change'}
        ],
        sysPlatformArray: [
          {required: true, type:'array', message: '请选择同步平台', trigger: 'change'}
        ],
        priceTypes: [
          {required: true, type:'array', message: '请选择价格类型', trigger: 'change'}
        ]
      }
    };
  },
  methods: {
    changePriceType(value){
      if(value?.length>0){
        this.activeName=value[0];
      }
    },
    changeStore(val){
      // this.getCarModelList();
      console.log('changeStore---', val)
      this.carModelList=[];
      const storeId = val.storeId;
      this.getCarModelList(storeId);
    },
    //车型发生改变
    changeCarModels(vals){
      console.log('models', this.form.currentCarModelList)
    },
    getStoreList(){
      priceUpdate.storeList().then(res=>{
        this.storeList=res.data||[];
      })
    },
    getCarModelList(storeId){
      priceUpdate.carModelList(storeId).then(res=>{
        const data=res.data||[];
        if (data.length>0){
          this.carModelList=data.map(item=>{
            const  obj = {
              flatPriceWeekdayPrice: null,
              flatPriceWeekendPrice: null,
              flatPriceViolationDeposit: null,
              flatPriceCarDeposit: null,
              xcWeekdayPrice: null,
              xcWeekendPrice: null,
              xcViolationDeposit: null,
              xcCarDeposit: null,
              hlWeekdayPrice: null,
              hlWeekendPrice: null,
              hlViolationDeposit: null,
              hlCarDeposit: null,
              wkWeekdayPrice: null,
              wkWeekendPrice: null,
              wkViolationDeposit: null,
              wkCarDeposit: null,
              fzWeekdayPrice: null,
              fzWeekendPrice: null,
              fzViolationDeposit: null,
              fzCarDeposit: null,
              atWeekdayPrice: null,
              atWeekendPrice: null,
              atViolationDeposit: null,
              atCarDeposit: null,
              zzcWeekdayPrice: null,
              zzcWeekendPrice: null,
              zzcViolationDeposit: null,
              zzcCarDeposit: null,
              carModelId: item.modelId,
              carModelName: item.modelName,
              priceType: null,
              startTime: null,
              endTime: null
            }
            return obj
          })
        }
      })
    },
    getServicesList(){
      priceUpdate.servicesList().then(res=>{
        this.servicesList=res.data||[];
      })
    },
    //执行
    saveForm(){
      //获取平日价格配置
      let ordinaryDayWorkList=[];
      if (this.form.priceTypes.includes('1')){
        ordinaryDayWorkList=this.$refs.ordinaryDay.saveTable()||[];
      }
      //获取节假日配置
      let holidaysWorkList=[];
      if (this.form.priceTypes.includes('2')){
        holidaysWorkList=this.$refs.holidays.saveTable()||[];
      }
      //获取特殊日配置
      let specialdaysWorkList=[]
      if (this.form.priceTypes.includes('3')){
        specialdaysWorkList=this.$refs.specialdays.saveTable()||[];
      }

      let resultWorkList = [...ordinaryDayWorkList, ...holidaysWorkList,...specialdaysWorkList];
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading=true
          //平台转化格式
          this.form.sysPlatform=this.form.sysPlatformArray.join(',')
          this.form.grabPriceWorkList=resultWorkList;
          priceUpdate.createdWork(this.form).then(res=>{
            this.$message.success('执行成功')
            this.close();
          }).finally(f=>{
            this.loading=false
          })
        }
      })
    },
    //关闭
    close(){
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
  },
  created() {
    this.getStoreList();
    // this.getCarModelList();
    // this.getServicesList();
  }
};
</script>
